<template>
  <div class="tab">
    <mt-tabbar v-model="$store.state.tabState" :fixed="true">
      <mt-tab-item id="1">
        <img v-if="$store.state.tabState!=1" slot="icon" src="./img/index0.png">
        <img v-else slot="icon" src="./img/index1.png">
        {{$t('m.index')}}
      </mt-tab-item>
      <mt-tab-item id="2">
        <img  v-if="$store.state.tabState!=2" slot="icon" src="./img/help0.png">
        <img v-else slot="icon" src="./img/help0.png">
        {{$t('m.liveHuman')}}
      </mt-tab-item>
      <mt-tab-item id="3">
        <img v-if="$store.state.tabState!=3" slot="icon" src="./img/user0.png">
        <img v-else slot="icon" src="./img/user1.png">
        {{$t('m.perProfile')}}
      </mt-tab-item>
    </mt-tabbar>
  </div>

</template>

<script type="text/ecmascript-6">
    export default {
      data(){
        return{
          selected:"1"
        }
      },
      methods:{
      },
      computed: {

      },
      watch:{
        "$store.state.tabState" (val) {
          console.log(val)
          if(val==='1'){
            this.$router.push('/index')
          }else if(val==='2'){
            this.$router.push('/trans')
          }else if(val==='3'){
            this.$router.push('/mine')
          }
        }
      }
    };
</script>

<style scoped="scoped">

</style>
